<template>
   <div>
    <div class="account-pages"></div>
    <div class="clearfix"></div>
    <div class="wrapper-page">
      <div class="text-center">
        <a href="/" class="logo">
          <span>
            Tao
            <span>Yun</span>
          </span>
        </a>
      </div>
      <div class="m-t-40 card-box">
        <div class="text-center">
          <h4 class="text-uppercase font-bold m-b-0">找回密码</h4>
        </div>
        <div class="panel-body">
          <div class="form-horizontal m-t-20">
            <div class="form-group">
              <div class="col-xs-12">
              账号：
                <input
                  class="form-control"
                  v-model="user_number"
                  type="text"
                  required
                  placeholder="User_Number"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              请输入邮箱：
                <input
                  class="form-control"
                  v-model="email"
                  type="text"
                  required
                  placeholder="Email"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12" style="width:250px">
              验证码：
                <input
                  class="form-control"
                  v-model="ver_code"
                  type="test"
                  required
                  placeholder="6位数字验证码"
                >
                
              </div>
              <el-button type="primary" style="margin-top:18px" v-if="ver_code_time==0" @click="getVerCode(user_number,email)">获取验证码</el-button>
              <el-button type="info" style="margin-top:18px" v-if="ver_code_time!=0" disabled>{{ver_code_time}}s</el-button>
              
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              新密码：
                <input
                  class="form-control"
                  v-model="new_password"
                  type="password"
                  required
                  placeholder="New Password"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              确认新密码：
                <input
                  class="form-control"
                  v-model="confirm_new_password"
                  type="password"
                  required
                  placeholder="Confirm New Password"
                >
              </div>
            </div>

            <div class="form-group text-center m-t-30">
              <div class="col-xs-12">
                <button
                  class="btn btn-custom btn-bordred btn-block waves-effect waves-light"
                  @click="changePassowrd()"
                >确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end card-box-->
    </div>
    <!-- end wrapper page -->
  </div>
</template>

<script>
   export default {
       data() {
           return {
               user_number:'',
               email:'',
               ver_code:'',
               new_password:'',
               confirm_new_password:'',
               ver_code_time:0,
               token_code:'',
           };
       },
       methods: {
            open_error(mes) {
                this.$notify.error({
                    title: "错误",
                    message: mes,
                    position: "bottom-right"
                });
            },
            open_success(mes) {
                this.$notify.success({
                    title: "成功",
                    message: mes,
                    position: "bottom-right"
                });
            },
            
            // 检测到token失效，跳转到登录页
            jump_to_login(){
                this.open_error("认证已经过期，已自动跳转到登录页面");
                this.$router.push({path:"/signin"});
            },

           // 获取验证码
           getVerCode(userNumber,email){
               // 设置60秒内不能重复点击获取验证码
                this.ver_code_time=60;
                let that=this;
                setInterval (function () {
                    if(that.ver_code_time!=0){
                        that.ver_code_time--;
                    }
                }, 1000)

               var formData=new FormData();
               formData.append('userNumber',userNumber);
               formData.append('email',email);
               
               this.$axios.post('/api/taoyun/v1/getVerCode',formData)
               .then((res) => {
                   console.log('res :>> ', res);
                    if(res.data.code=="200"){
                        this.open_success(res.data.msg);
                        this.token_code=res.data.data;
                    }
                    else{
                        this.open_error(res.data.msg);
                    }
               })
               .catch((err) => {
                   console.log('err :>> ', err);
                  this.open_error("服务器宕机了...请稍后再试。");
               });
           },

           // 修改密码
           changePassowrd(){
               var formData=new FormData();
               formData.append('userNumber',this.user_number);
               formData.append('email',this.email);
               formData.append('verCode',this.ver_code);
               formData.append('newPassword',this.new_password);
               formData.append('confirmPassword',this.confirm_new_password);
               
               this.$axios.post('/api/taoyun/v1/retrievePassword',
                    formData,
                    {
                        headers: {'tokenCode': this.token_code}
                    }
               )
               .then((res) => {
                  if(res.data.code=="200"){
                      this.open_success(res.data.msg+"请重新登录。");
                      this.$router.push({path:"/signin"});
                  }
                  else{
                      this.open_error(res.data.msg);
                  }
               })
               .catch((err) => {
                   if(err.response){
                       console.log('err.response :>> ', err.response);
                   }
                  this.open_error("服务器宕机了...请稍后再试。");
               });
           },
           getUserInfo(){
                // 从浏览器缓存拿token到vuex  防止刷新浏览器就丢失token
                this.$store.commit("set_token", window.localStorage.getItem("tokenLogin")); 
                this.$axios.get('/api/taoyun/v1/getUser')
                .then((res) => {
                    if(res.data.code=="200"){
                        let userInfo=res.data.data;
                        this.email=userInfo.email;
                        this.user_number=userInfo.userNumber;
                    }
                })
                .catch((err) => {

                });
            },
       },
       created() {
           this.getUserInfo();
       },
   }
</script>

<style scoped>
.all{
    background:#ffffff;
    font-family: 'FontAwesome';
}
</style>